<template>
  <el-container class="note_book_book_css" style="min-height: 500px; border: 1px solid #eee" v-loading="loading">
    <el-aside width="300px">

      <el-card class="box-card">
        <div slot="header" class="clearfix" style="height: 38px">
          <span>章节</span>
        </div>
        <div class="text item">
          <el-tree :data="chapterList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
      </el-card>
    </el-aside>

    <el-container>
      <el-header style="font-size: 16px">
        <span>{{chapter.chapterName}}</span>
        <el-button class="eltag" type="info" @click="closeActive">收缩</el-button>

      </el-header>

      <el-main>
        <el-collapse v-model="activeContentIds" class="contents">
          <el-collapse-item v-for="item in contents" :key="item.id">
            <template slot="title">
              <i class="header-icon el-icon-reading"></i> <span> {{ item.title}}</span>
            </template>
            <div v-if="item.content" v-html="item.content"/>
            <div v-if="item.think" v-html="item.think"/>
          </el-collapse-item>

        </el-collapse>
      </el-main>
    </el-container>
  </el-container>
</template>
<
<script>
  import Editor from "@/components/Editor";

  import {
    listChapter
  } from "@/api/note/chapter";
  import {
    listContent
  } from "@/api/note/content";

  export default {
    props: {
      bookId: {
        type: Number,
        default: ""
      }
    },
    components: {Editor},
    data() {
      return {
        activeContentIds: [],
        contents: [],
        chapter: {title: ""},
        loading: false,
        chapterList: [],
        defaultProps: {
          children: 'children',
          label: 'chapterName'
        }
      }
    },
    watch: {
      bookId: {
        deep: true, immediate: true,
        handler(val) {
          this.setBookId(val)
        }
      }
    },
    methods: {
      closeActive() {
        this.activeContentIds = [];
      },
      handleNodeClick(data) {
        this.chapter = data;
        this.setChapterId(data.id);
      },
      reset() {
        this.chapterList = [];
        this.contents = [];
        this.chapter = {};
      },
      setBookId(bookId) {
        if (!bookId) return;
        this.reset();
        this.loading = true;
        listChapter({bookId: bookId}).then(response => {
          this.chapterList = this.handleTree(
            response.data,
            "id",
            "parentId"
          );
          this.loading = false;
        });
      },
      setChapterId(chapterId) {
        if (!chapterId) return;
        this.loading = true;
        listContent({chapterId: chapterId}).then(response => {
          var json = JSON.stringify(response.rows);
          console.info(json)
          json = json.replaceAll("<img", "<img style='width:100%'");
          console.info(json)
          this.contents = JSON.parse(json);
          this.loading = false;
        });
      }
    }
  }
</script>

<style>
  .note_book_book_css .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .note_book_book_css .el-aside {
    color: #333;
    background-color: rgb(238, 241, 246)
  }

  .note_book_book_css .contents span {
    margin-left: 10px;
  }

  .note_book_book_css .eltag {
    float: right;
    margin-top: 12px;
  }
</style>
